<!--
 * @Description: 第四章-路由传参
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-26 01:44:13
-->
<template>

    <div class="reg2">
        <h4><button @click="router.back()">返回</button>路由传参 详情页面</h4>

        <div>
            <h5>动态路由参数</h5>
            <div>品牌 item.name： {{ item?.name }}</div>
            <div>价格 item.price： {{ item?.price }}</div>
            <div>ID item.id： {{ item?.id }}</div>
        </div>

    </div>

</template>
<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';

import { data } from './list.json'

// 注意，没有r
const route = useRoute()

const router = useRouter()

const item = data.find(v => v.id === Number(route.params.id))

console.log('reg3 item: ', item);


</script>
<style scoped>
.reg2 {
    background-color: blue;
    color: #fff;
}
</style>